<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="p5.js"></script>
    <script src="p5.dom.js"></script>
    <script src="p5.sound.js"></script>
    <script src="p5.play.js"></script>
    <script src="p5.easycam.js"></script>
    <script src="p5.3d.xhelp.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .drawbox {
            width: 600px;
            height: 600px;
            float: left;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div id="docid1" class="drawbox"></div>
    <div id="docid2" class="drawbox"></div>
    <script>
        var p5doc1 = new p53dxh("docid1");
        var rca1 = p5doc1.create_rect(50, 100, 120, 120, 244, 0, 0);
        var rca2 = p5doc1.create_rect(300, 100, 120, 120, 0, 220, 0);
        var rca3 = p5doc1.create_rect(100, 300, 120, 120, 0, 0, 110);
        p5doc1.add(rca1, rca2, rca3);

        var p5doc2 = new p53dxh("docid2");
        var rc2 = p5doc2.create_rect(50, 100, 120, 120, 0, 200, 0);
        var line1 = p5doc2.create_line(100, 100, 50, 100, 200, 200, 0);
        p5doc2.init();
        p5doc2.add(rc2, line1);
    </script>
</body>

</html>